<template>
<div>
  <el-card class="box-card">
    <div>
      <el-form :inline="true" :model="dictTypeDTO" class="demo-form-inline">
        <el-select v-model="dictTypeDTO.type" placeholder="请选择类型">
          <el-option label="查询全部" :value="null"></el-option>
          <el-option v-for="item in list" :label="item.type" :value="item.type"></el-option>
        </el-select>

        <el-form-item>
          <el-button @click="show">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openDialog()">新增</el-button>
        </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%" row-key="type"
      >
        <el-table-column
          prop="id"
          label="字典编码"
          width="120">
        </el-table-column>
        <el-table-column
          prop="sort"
          label="字典排序"
          width="120">
        </el-table-column>
        <el-table-column
          prop="label"
          label="字典标签"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="value"
          label="字典键值"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="type"
          label="字典类型"
          show-overflow-tooltip>
        </el-table-column>

        <el-table-column fixed="right" label="操作"  >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(scope.row.id)">修改</el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="dictTypeDTO.pageIndex"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="dictTypeDTO.pageSize"
        :total="total"
        layout=" -> ,total,sizes, prev, pager, next, jumper"
        style="margin-top:20px;"
      >
      </el-pagination>
    </div>

      <el-dialog
        :title="dictData.id===0?'新增用户':'修改用户'"

        width="35%" :visible.sync="dialogFormVisible" @close="closeDialog()" >
        <el-form :model="dictData"
                 ref="ruleFrom">
          <el-form-item label="字典排序" :label-width="formLabelWidth" prop="sort">
            <el-input v-model="dictData.sort" placeholder="字典排序"
                      style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="字典标签" :label-width="formLabelWidth" prop="label">
            <el-input v-model="dictData.label" placeholder="字典标签"
                      style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="字典键值" :label-width="formLabelWidth" prop="value">
            <el-input v-model="dictData.value" placeholder="字典键值"
                      style="width: 300px;"></el-input>
          </el-form-item>

          <el-form-item label="字典类型" :label-width="formLabelWidth" prop="type">
            <el-input v-model="dictData.type"  placeholder="字典类型"
                      style="width: 300px;"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmitFromData('ruleFrom')">确 定</el-button>
        </div>
      </el-dialog>
  </el-card>
</div>
</template>

<script>
import api from "@/utils/dictData"
export default {
  name: "index",
  data(){
    return{
      formLabelWidth:"120px",
      dataList:[],
      type:'',
      dataDialogFrom:{
        id:0
      },
      dialogFormVisible:false,
      dictData:{
        id:0,
        type:this.$route.query.type,

      },
      list:[],
      dictTypeDTO:{
        pageIndex:1,
        pageSize:5,
        type:this.$route.query.type,
      },
      total: 0
    }
  },
  methods:{
    sizeChangeHandle(val){
      this.dictTypeDTO.pageSize=val
      this.show()
    },
    currentChangeHandle(val){
      this.dictTypeDTO.pageIndex=val
      this.show()
    },
    show(){
      api.detailList(this.dictTypeDTO).then(res=>{
        this.dataList=res.list
        this.total=res.total
      })
    },
    handleSubmitFromData(){
      if (!this.dictData.id){
        this.save()
      }else {
        this.update()
      }
    },
    save(){
      api.saveDict(this.dictData).then(res=>{
        //关闭弹窗
        this.dialogFormVisible=false
        //刷新页面
        this.show();
      })
    },
    update(){
      api.updateDict(this.dictData).then(res=>{
        //关闭弹窗
        this.dialogFormVisible=false
        //刷新页面
        this.show();
      })
    },

    openDialog(){
      this.dialogFormVisible=true
    },
    handleEdit(id){
      this.dialogFormVisible=true
      api.updateById(id).then(res=>{
        this.dictData=res
      })
    },
    List(){
      api.queryType().then(res=>{
        this.list=res
      })
    },
    handleDelete(id){
      // debugger
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用
          return api.deleteDict(id);
        })
        .then((response) => {
          //刷新页面
          this.show();
          //提示信息
          this.$message.success("删除成功");
        });

    },

    closeDialog(){
      this.dataDialogFrom={
        id: 0,
      }
    },
  },
  mounted() {
    this.show()
    this.List()
  }
}
</script>

<style scoped>

</style>
